セイロップの設楽です。
セイロップでは希望者にClaude Codeを配布しており、業務や個人開発での活用が盛んに行われています。今回はゴールデンウィークの時間を活用して、Claude Codeを使ったObsidian Plugin開発に挑戦しました。本記事ではその開発の流れと、AIを活用した個人開発で気づいたことをご紹介します。
解決したかった課題
私はObsidian(マークダウン形式のメモアプリ)を使って、日々の筋トレ内容を記録しています。ただ、記録は自由記述形式でメモしていたため、次の2つの課題を生んでいました。
- 入力が面倒：種目ごとに記載フォーマットがバラバラで、毎回考えながら書く必要がある
- 分析しづらい：データが構造化されていないため、振り返りや傾向把握が難しい
私は情報をObsidianに集約する方針を取っているため、サードパーティのアプリではなくObsidian上で完結させたいという思いがあります。そこでObsidianのPlugin(拡張機能)を開発して、この課題を解決することにしました。
要件定義
[作業時間: 2時間]
まずは解決すべき課題を明確にするために要件定義を行いました。
Claude Codeには「skills」という仕組みがあります。これはAIへの指示をテンプレート化し、再利用できる機能です。今回はClaude Codeの開発元であるAnthropicが公式に提供しているskill-creator（skillを作るためのskill）を使って、Obsidian Plugin開発の要件定義に特化した「obsidian-plugin-requirements」というskillを作成しました。skills-creatorは対話形式で作成したい要件のskillsをヒアリングしてくれるため、Claude Codeからの質問に答えるだけで、プロンプトを工夫せずとも簡単にskillsが作成可能です。
obsidian要件定義skillを作成するためのプロンプト
skills-creatorのskillを使ってskillを作って - 目的 - obsidianのplugin作成のための要件定義を行う - usecase - pluginは配布せず、個人でのみ利用する
作成したskillは、逆質問形式で課題を引き出してくれます。対話の中で課題の解像度が自然と高まっていくので効率的に要件を特定することができました。この要件定義を要件定義書（spec.md）としてファイルに保存し、実装のインプットとしました。
obsidian-plugin-requirements に向けた要件定義のたたき台を作成するプロンプト
## 現在の課題 - workoutの記録を自然言語で登録している - 記載の粒度のばらつきがあり、解析が難しい - workoutの種目によって記録フォーマットが異なる - daily noteに記録しているが、入力が面倒 ## 解決したい課題 - workoutの種目ごとに決まった入力フォーマットを用意して、正規化されたデータとして扱えるようにする - 入力しやすいUIを提供する ## 背景 - 毎日、スマホのObsidianから入力する
プロトタイプ実装
[作業時間: 1時間]
Obsidian Pluginの開発経験はゼロだったため、まずは公式ドキュメントやGeminiでキャッチアップを行いました。Obsidian Pluginは公式の開発用テンプレートが公開されているため、これをベースに開発をスタートしました。
実装の進め方は、海外エンジニアのBoris Tane氏のブログ記事（How I Use Claude Code）を参考に「計画と実装を分離する」フローを採用しました。AIに一気にやらせると品質が下がりやすいため、まず計画を立て、それをレビューしてから実装に進む方法です。
実装のプロンプト
@docs/spec.md の内容を実装していきましょう step1. 実装計画をplan.mdにたてる step2. plan.mdをtodoリストにしてより詳細な実装タスクに分解する step3. 実装を行う step4. 検証を行う(UT（ユニットテスト）など) step5. 実装に対してコードレビューを行う 終了判定 @docs/spec.md のUIが動作するようになるところまで
指示から20分ほどで実装が完了し、動くプラグインが完成しました。
実際に触って見ることで要件定義の方向性は間違っていなかったことが確認できました。
デザインの磨き込み
[作業時間: 1日]
プロダクトの方向性が問題ないことが確認できたため、次はデザインの磨き込みに着手しました。
今回は、AnthropicのClaude Designを活用しました。
Claude Designとは
https://www.anthropic.com/news/claude-design-anthropic-labs
Anthropicが開発するAIと対話しながら視覚的なアウトプットを作成できるAIデザイン・プロトタイピングツール
一般的な画像生成AI（1枚の絵を作る）とは異なり、html, css, jsベースで実際に動くUIプロトタイプが生成され、実装可能なコードへの橋渡しを一つの流れで行えることが特徴
Claude Designも逆質問でデザインの方向性を決めてくれます。先ほど作成した要件定義書（spec.md）を連携し、Googleのデザインガイドライン（Material Design 3）ベースのデザインを指定しました。
コメントやプロンプトで細かくUIを調整しながら、自分が「使いたい」と思えるデザインを高速でビルドと検証を繰り返せるのは、個人開発ならではの楽しさがありました。
また、Claude DesignからClaude Codeへの連携もスムーズで、生成されたHTML/CSSをそのまま実装に落とし込めたのもとても便利でした。
Obsidianの既存データをPluginへ移行
[作業時間: 1時間]
これまでObsidianに記録していた自由記述形式の既存データを、Claude Codeを使ってプラグイン用のデータ構造に変換しました。
ObsidianはローカルなMarkdownファイルで情報を管理しているため、Claude Codeとの相性が非常に良く、既存データをそのまま活用できるました。ゼロから始める必要がなかったのは嬉しいポイントでした。
分析ダッシュボードの追加
[作業時間: 2日]
1日で基本機能が完成してしまったので、「継続のモチベーションが上がるような分析UIを作りたい」という欲が出てきました。
しかし、ここでの要件定義が難しかったです。
分析UIには棒グラフ・折れ線グラフ・カレンダーなど表現形式が多く、テキストだけの壁打ちではユーザー(自分)が理想とするUIの方向性を絞り込めませんでした。そこで、web上にある分析ダッシュボードのデザインを眺めながら好みのUIを見定め、Claudeとも会話しながら課題の解像度を上げていきました。
- トレーニング内容は日々あまり変わらないので、変化量の可視化より積み上げの可視化が有効
- 月のトレーニング量を可視化することで、達成感とモチベーション維持につながる
- 毎日継続していることを視覚的に分かりやすくすることが重要
この仮説をもとにClaude Designで複数パターンのUIを作成し、方向性を詰めていきました。
AI開発の品質を保つための仕組みづくり
[作業時間: 1時間]
コードベースが大きくなるにつれ、実装時に修正漏れが生じるようになりました。そこでAI駆動開発の品質を担保するための仕組みを整備しました。
- CLAUDE.md：AIがプロジェクト全体を把握するための説明書を、
/initコマンドで自動生成 - hooks：作業終了時にコードの品質チェック（lint）とビルドを自動で実行する設定を追加
- Sub-Agentの活用：AIを複数起動して役割分担させることで、計画と実装を分離するフローをより精度高く実行
この仕組みを整えたことで、要件が増えても精度高く実装を進められるようになりました。
成果物
合計で4日ほどの開発期間でUI/UXにこだわった満足のいくプラグインが完成しました。
実際に開発したものは下記で公開しています。
https://github.com/taratara10/obsidian-workout
学んだこと
個人開発のハードルが劇的に下がった
Obsidian PluginやWeb開発の知識がゼロの状態から、一度もコードを自分で書かずに開発を完了できました。コーディングにとどまらず、要件定義・デザイン作成まで一気通貫でAIと進められるようになったことは大きな変化です。
これまで「学習コストが高い」「ちょっとした課題を解決するだけなのに大げさ」と感じて手をつけられなかった領域でも、気軽に挑戦できるようになりました。専門外の技術スタックや小さな課題解決にも、以前より格段に低いコストで踏み込めます。
仮説検証のサイクルが劇的に速くなった
要件定義からプロトタイプ作成まで、わずか1〜2時間で完成してしまうスピード感には衝撃を受けました。AIとの対話で課題を深堀りしながら要件を整理し、そのまま実装・検証まで一気に進められるため、仮説検証のサイクルを1日で何周も回せます。
特に実感したのは、「要件定義はやり直せる」という感覚の変化です。最初の1回で完璧な要件定義を作ろうとするよりも、AIを使って高速に作ってプロトタイプで検証し、そこから精度を上げていく方がはるかに効率的でした。完成度より回転数を上げることが、良いプロダクトへの近道だと感じています。
「何を作るか」がより重要になった
AIは与えられたタスクを解決することに非常に優れています。しかし、「誰の、どんな課題を解決するか」という問いを作るのは依然として人間の仕事になります。
これまでの自分はエンジニアとして課題の解決方法（How）に重きを置きがちでした。しかしコーディングのコストがAIによって大きく下がりつつある今、解くべき課題の設定（What）という、プロダクト開発の本質的な部分に時間をかける価値が増しています。「作れるかどうか」より「作る価値があるかどうか」を問う力が、これからのエンジニアに求められると感じました。
まずはやってみる
誰でも作れる時代になったからこそ、実際に手を動かした経験そのものが差別化になっていきます。普段と異なる領域での開発は、エンジニアとしての視野を広げ、プロダクト開発の審美眼を鍛えてくれます。
今回改めて、ユーザーの課題を解決していくプロダクト開発の本質的な部分が非常に面白いと実感しました。エンジニアリングは本当に楽しい！！！
まとめ
実際に手を動かしながらClaude Codeを使った個人開発を通じて、AIを活用した開発の可能性と面白さをしっかりと体感できました。この記事がAI開発に挑戦するきっかけになれば幸いです。
セイロップでは、AI開発や個人開発を推奨する環境が整っており、エンジニアが自律的に技術を磨ける文化があります。新しいことに挑戦し、技術を高められる環境で一緒に働きましょう！